﻿@charset "utf-8";
@import url(../lib/layui/css/layui.css);

* {
    margin: 0px;
    padding: 0px;
}

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 70px repeat(3,1fr);
    /*min-width: 1200px;*/
    width: auto;
    /*width: 1200px;*/
    /*min-height: 600px;*/
    height: 100vh;
    background-color: darkslateblue;
}




.header {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
    text-align: center;
    /*background-color: azure;*/
    /*border-radius: 5px;*/
    margin: 5px;
    font-size: 25px;
    
}

.biggerItem {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
    background-color:azure;
    
    border-radius: 5px;
    margin: 5px;
}

.item-1-2 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-2-2 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-3-2 {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-4-2 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}


.item-1-3 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 3;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-2-3 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-3-3 {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 3;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-4-3 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 3;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}


.item-1-4 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 4;
    grid-row-end: 4;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-2-4 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 4;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-3-4 {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 4;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

.item-4-4 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 4;
    background-color: azure;
    border-radius: 5px;
    margin: 5px;
}

h1 {
    color: lightgoldenrodyellow;
    letter-spacing: 25px;
    font-family: 'Microsoft YaHei UI';
}
